/*
 * @Author: xiaosihan 
 * @Date: 2023-08-31 22:53:40 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-04-17 19:12:46
 */




import designEditor from "../../designEditor";
import fontManage from "@/myFabric/fontManage";
import { TextOptions } from "fabric/fabric-impl";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import styles from "./textItem.module.less";

interface Iprops {
  id: string,
  img: string,
  onClick?: (text: string, option: TextOptions) => void;
}

// 文字
export default function TextItem(props: Iprops) {

  const [state, setState] = useState(0); // 0:未加载 1:加载中  2:加载完成

  useEffect(() => {

  }, []);

  useEffect(() => autorun(() => {
    const { loadingFonts, loadedFonts } = fontManage.store;

    if (loadingFonts.includes(props.id)) {
      setState(1);
    } else if (loadedFonts.includes(props.id)) {
      setState(2);
    }
  }), []);

  return (
    <div
      onClick={() => {
        fontManage.loadFont([props.id]);
        if (props.onClick) {
          props.onClick("text", { fontFamily: props.id });
        } else {
          designEditor.addText("text", { fontFamily: props.id });
        }
      }}
      className={styles.textItem}
    >
      <img src={props.img} alt="" />
    </div>
  );

}